import React from 'react';
import {Card, Spin} from 'antd';
import PropTypes from 'prop-types';

const UserDetail = ({user, handleModifyUser}) => {

  if (user.loading) {
    return (
      <div>
        <Spin>
          <Card title="TA的资料" extra={<a onClick={() => handleModifyUser(user.id)}>修改</a>}>
            <p>电话号码: {user.mobile}</p>
            <p>电子邮箱：{user.email}</p>
            <p>用户名: {user.username}</p>
            <p>真实姓名: {user.realname}</p>
            <p>性别: {user.sex}</p>
            <p>身份证号码: {user.id_card_number}</p>
            <p>籍贯: {user.origin_address}</p>
            <p>现居地: {user.live_address}</p>
            <p>教育信息: {user.education_info}</p>
          </Card>
        </Spin>
      </div>
    );

  } else {

    return (
      <div>
        <Card title="TA的资料" extra={<a onClick={() => handleModifyUser(user.id)}>修改</a>}>
          <p>电话号码: {user.mobile}</p>
          <p>电子邮箱：{user.email}</p>
          <p>用户名: {user.username}</p>
          <p>真实姓名: {user.realname}</p>
          <p>性别: {user.sex}</p>
          <p>身份证号码: {user.id_card_number}</p>
          <p>籍贯: {user.origin_address}</p>
          <p>现居地: {user.live_address}</p>
          <p>教育信息: {user.education_info}</p>
        </Card>


        <Card title="TA拥有的权限" extra={<a href="/role">修改</a>}>
          <p>对 投票 进行 修改</p>
          <p>对 投票 进行 读取</p>
          <p>对 投票 进行 新增</p>
          <p>对 用户 进行 修改</p>
          <p>对 用户 进行 读取</p>
          <p>对 用户 进行 新增</p>
          <p>对 投票主题 进行 新增</p>
          <p>对 投票主题 进行 修改</p>
          <p>对 投票主题 进行 删除</p>
          <p>对 投票主题 进行 读取</p>
          <p>对 候选对象 进行 新增</p>
          <p>对 候选对象 进行 修改</p>
          <p>对 候选对象 进行 删除</p>
          <p>对 候选对象 进行 读取</p>
        </Card>

        <Card title="TA最近发布的投票" extra={<a href="">更多</a>}>
          暂无
        </Card>

        <Card title="TA最近参与的投票" extra={<a href="修改">更多</a> }>
          暂无
        </Card>
      </div>
    );
  }
};

UserDetail.propTypes = {
  user: PropTypes.object.isRequired,
  handleModifyUser: PropTypes.func.isRequired
};

export default UserDetail;
